// const dialog = new Dialog();
// {content: '', title: '温馨提示', cancel: '关闭', sure: '确定'}
// dialog.loading();
// dialog.close();
//
// dialog.alert({content: '我是对话框！'}, function(res) {
//   console.log(res);
// });
//
// dialog.confirm({content: '我是对话框！'}, function (res) {
//     console.log(res)
// });
//
// dialog.prompt({content: '我是对话框！'}, function(res) {
//   console.log(res);
// });

const $ = require('../lib/kdom');

class Dialog {
  params = {
    box: 'body',
    height: window.innerHeight,
  };

  constructor(opts) {
    opts = opts || {};
    for (let k in this.params) {
      if (opts[k] !== undefined) this.params[k] = opts[k];
    }
    this.params.box = $.qu(this.params.box);
  }

  init(str, arr) {
    const that = this;
    that.create(arr.cls[0]);
    that.create(arr.cls[1], str);
  }

  create(tid, txt) {
    const that = this;
    let id = tid.split(' ')[0];
    const params = that.params;
    const dv = document.createElement('div');
    dv.className = tid || '';
    dv.id = id || '';
    dv.innerHTML = txt === undefined ? '' : txt;
    if ($.id(id)) {
      params.box.removeChild($.id(id));
    }
    params.box.appendChild(dv);
    if (id === 'dialogContainer') dialogContainer.style.marginTop = (params.height - dialogContainer.offsetHeight) / 2 + 'px';
  }

  alert(obj, cb) {
    this.setUp(obj, cb, {key: 'alert', cls: ['shade', 'dialogContainer']});
  }

  confirm(obj, cb) {
    this.setUp(obj, cb, {key: 'confirm', cls: ['shade', 'dialogContainer']});
  }

  loading() {
    const that = this;
    let str = `<div class="dialog-loading"><div class="icon-loading"></div><p class="icon-text">奋力加载中...</p></div>`;
    that.init(str, {key: 'loading', cls: ['shade active', 'dialogContainer active']});
  }

  prompt(obj, cb) {
    this.setUp(obj, cb, {key: 'prompt', cls: ['shade', 'dialogContainer']});
  }

  setUp(obj, cb, arr) {
    const that = this;
    obj = that.checkParam(obj);
    let str = that.textHtml(obj, arr.key);
    that.init(str, arr);
    let rc = null;
    if (arr.key === 'alert') {
      rc = new Array(shade, cancel);
    } else if (arr.key === 'confirm' || arr.key === 'prompt') {
      rc = new Array(cancel, sure);
    } else {
      rc = new Array(shade, cancel, sure);
    }
    that.bind(rc, cb, arr.key);
  }

  checkParam(rs) {
    let rc = {
      content: '',
      title: '\u6e29\u99a8\u63d0\u793a',
      cancel: '\u5173\u95ed',
      sure: '\u786e\u5b9a',
    };
    for (let k in rc) {
      if (rs[k] !== undefined) rc[k] = rs[k];
    }
    return rc;
  }

  textHtml(data, str) {
    let rc = '';
    rc += `<div class="dialog-haed">${data.title}</div>`;
    if (str === 'prompt') {
      rc += `<div class="dialog-body"><input id="dialogPromptVal" type="text" value="" placeholder=""></div>`;
    } else {
      rc += `<div class="dialog-body">${data.content}</div>`;
    }
    if (str === 'confirm' || str === 'prompt' || str === 'alert') {
      rc += `<div class="dialog-foot"><div class="dialog-foot-cell" id="cancel">${data.cancel}</div>`;
      if (str !== 'alert') {
        rc += `<div class="dialog-foot-cell" id="sure">${data.sure}</div>`;
      }
      rc += `</div>`;
    }
    return rc;
  }

  bind(data, cb, str) {
    const that = this;
    if (data.length > 0) {
      let rc = true;
      for (let i = 0, d = data, len = d.length; i < len; i++) {
        d[i].addEventListener('click', function () {
          if (this.id === 'shade') {
            rc = false;
          }
          if (this.id === 'cancel') {
            rc = false;
          }
          if (this.id === 'sure') {
            if (str === 'prompt') {
              rc = dialogPromptVal.value || null;
            } else {
              rc = true;
            }
          }
          that.hide(shade, dialogContainer);
          if (cb instanceof Function) cb(rc);
        });
      }
    }

  }

  show() {
  }

  hide(...args) {
    for (let i = 0, d = args, len = d.length; i < len; i++) {
      if (d[i] instanceof Object) d[i].style.display = 'none';
    }
  }

  close() {
    this.hide(shade, dialogContainer);
  }
}

export default Dialog;